<template>


  <el-dialog
      v-model="props.MenuData.dialogVisible"
      :title="props.MenuData.transition==0?'新增':'修改'"
      width="30%"
      :before-close="handleClose"
  >
    <el-row  class="elrowkin">
      <el-col :span="5">
        菜单名称:</el-col><el-col :span="19">
      <el-input v-model="props.MenuData.menu.menuName"  style="width: 300px"/>
    </el-col></el-row>
    <el-row class="elrowkin"><el-col :span="5">
      上级菜单:
    </el-col> <el-col :span="19"><TreeMenu :MenuList="menuList" ref="menuZ" :MenuData="props.MenuData"></TreeMenu></el-col></el-row>
    <el-row  class="elrowkin">
      <el-col :span="5">
        菜单路由:</el-col><el-col :span="19">
      <el-input v-model="props.MenuData.menu.path"  style="width: 300px"/>
    </el-col></el-row>

    <el-row  class="elrowkin">
      <el-col :span="5">
        菜单权限:</el-col><el-col :span="19">
      <el-input v-model="props.MenuData.menu.perms"  style="width: 300px"/>
    </el-col></el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="insertMenu">确认</el-button>
        <el-button type="primary" @click="props.MenuData.dialogVisible = false">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import TreeMenu from "./TreeMenu.vue"
import axios from "axios";
import {useRouter} from "vue-router";
const router=useRouter()
const menuZ =ref();
const props =defineProps({
  MenuData:{
    type:Object
  }
})
const menuList = reactive({
  menuList:{},
  value:{
    id:-1,
    menuName:""
  }
})
const defaultMenu = (menu)=>{
 if(menu==null){
   menuList.value.id=-1;
   menuList.value.menuName="";
 }else{
  menuZ.value.gaoliang(menu.fatherId)

   if(menu.fatherId==0){
     menuList.value.id=0;
     menuList.value.menuName="主文件夹";
   }else{

     menuList.value.id=menu.fatherId;
     menuList.value.menuName=menu.sysMenu.menuName;

   }
 }
}
onMounted(()=>{
  axios.get("http://localhost:1688/login/checkMenu").then((data)=>{
    console.log(data.data.data)
    menuList.menuList =data.data.data;
  })
})
defineExpose({ defaultMenu })

const dialogVisible = ref(false)
const insertMenu =()=>{
  if (props.MenuData.transition==0){

    props.MenuData.menu.fatherId = menuZ.value.menuId();
    const url ="http://localhost:1688/login/insertMenu";
    axios.post(url,props.MenuData.menu).then((data)=>{
      const val =data.data;
      console.log(val)
      if(val.code==403){
        ElMessage.error("权限不足")
      }else {
        console.log(data)
      router.go()
      }
    })
  }else{
    console.log(props.MenuData.menu)
    props.MenuData.menu.fatherId = menuZ.value.menuId();
    const url = "http://localhost:1688/login/updatemenu";
    axios.put(url,props.MenuData.menu).then(data=>{
      console.log(data.data)
      const val =data.data;
      console.log(val)
      if(val.code==403){
        ElMessage.error("权限不足")
      }else {
        console.log(data)
        router.go()
      }
    })
  }
  props.MenuData.dialogVisible = false
  props.MenuData.menu = {};
  menuZ.value.eliminatef();
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('你确定能要取消')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.elrowkin{
  margin-top: 5px;
}
</style>
